<template>
  <div class="user-container">
    <div class="user-box">
      <div class="user-header">
        <img :src="userInfo.avatar" :alt="userInfo.username" class="avatar">
        <h2>{{ userInfo.username }}</h2>
      </div>
      <div class="user-info">
        <div class="info-item">
          <label>邮箱：</label>
          <span>{{ userInfo.email }}</span>
        </div>
        <div class="info-item">
          <label>角色：</label>
          <span>{{ userInfo.role }}</span>
        </div>
      </div>
      <div class="actions">
        <button @click="handleLogout" class="logout-btn">退出登录</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { userApi } from '@/api/user'
import type { UserInfo } from '@/api/user'

const route = useRoute()
const router = useRouter()
const userInfo = ref<UserInfo>({
  id: 0,
  username: '',
  email: '',
  avatar: '',
  role: ''
})

const fetchUserInfo = async () => {
  try {
    const userId = parseInt(route.params.id as string)
    const { data } = await userApi.getUserInfo(userId)
    if (data.code === 200) {
      userInfo.value = data.data
    } else {
      alert(data.message)
      router.push('/login')
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
    router.push('/login')
  }
}

const handleLogout = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('user')
  router.push('/login')
}

onMounted(() => {
  fetchUserInfo()
})
</script>

<style scoped>
.user-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.user-box {
  width: 100%;
  max-width: 420px;
  padding: 2.5rem;
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.user-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-bottom: 1.5rem;
  border: 4px solid #667eea;
  object-fit: cover;
}

h2 {
  color: #2d3748;
  margin: 0;
  font-size: 1.75rem;
}

.user-info {
  margin-bottom: 2.5rem;
}

.info-item {
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  padding: 0.75rem;
  background: #f8fafc;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.info-item:hover {
  background: #edf2f7;
  transform: translateX(5px);
}

label {
  color: #4a5568;
  width: 60px;
  font-weight: 500;
}

span {
  color: #2d3748;
  flex: 1;
}

.actions {
  text-align: center;
}

.logout-btn {
  width: 100%;
  padding: 0.875rem;
  background: linear-gradient(135deg, #f56565 0%, #c53030 100%);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.logout-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 101, 101, 0.2);
}

.logout-btn:active {
  transform: translateY(0);
}

@media (max-width: 480px) {
  .user-box {
    padding: 1.5rem;
    margin: 1rem;
    width: calc(100% - 2rem);
  }

  .avatar {
    width: 100px;
    height: 100px;
  }

  h2 {
    font-size: 1.5rem;
  }

  .info-item {
    padding: 0.5rem;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .user-box {
    width: 90%;
    max-width: 400px;
  }
}

@media (min-width: 769px) {
  .user-box {
    width: 420px;
  }
}

/* 添加深色模式支持 */
@media (prefers-color-scheme: dark) {
  .user-box {
    background: #1a1a1a;
  }

  h2 {
    color: #ffffff;
  }

  .info-item {
    background: #2d3748;
  }

  .info-item:hover {
    background: #4a5568;
  }

  label {
    color: #e2e8f0;
  }

  span {
    color: #ffffff;
  }
}
</style> 